<template>
   <div>
   	 <city-header></city-header>
   	 <city-search :cities="cities"></city-search>
     <city-list :hotCities = "hotCities" 
                :cities ="cities"
                :letter ="letter"></city-list>
     <city-alphabet :cities ="cities"
                     @change = "getCurrentAlphabet"
                     ></city-alphabet>
   </div>  
</template>
<script>
import axios from 'axios'
import CityHeader from './components/cityHeader'
import CitySearch from './components/citySearch'
import CityList from './components/cityList'
import CityAlphabet from './components/cityAlphabet'
export default{
	name : 'City',
	components: {
      CityHeader,
      CitySearch,
      CityList,
      CityAlphabet
	},
	data () {
      return {
      	hotCities : [],
      	cities : {},
        letter : ''
      }
	},
	methods:{
       getCityInfo () {
       	axios.get('/api/city.json')
       	.then(this.getCityInfoSucc)
       },
       getCityInfoSucc (res) {
       	 res =res.data
         if(res.ret && res.data){
         	const data = res.data
         	this.hotCities = data.hotCities
         	this.cities = data.cities
         }
       },
       getCurrentAlphabet (letter) {
         this.letter = letter
       }
	},
	mounted () {
		this.getCityInfo()
	}
}
</script>
<style></style>